<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>导出详情</title>
    <style>
        html,
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        body {
            background: linear-gradient(135deg, #0f1629 0%, #1a1f35 100%);
            height: 100%;
            width: 100%;
        }

        .content {
            width: 100%;
            height: 100%;
            overflow: auto;
            color: #cbd5e1;
            background: rgba(26, 30, 48, 0.95);
            backdrop-filter: blur(10px);
            padding: 4%;
            box-sizing: border-box;
            border-radius: 16px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
            /* 添加弹性滚动 */
            -webkit-overflow-scrolling: touch;
        }

        #content-detail {
            width: 100%;
            height: 100%;
            overflow: auto;
        }

        .row {
            min-height: 40px;
            background: rgba(30, 41, 59, 0.5);
            margin: 8px 0;
            border-radius: 8px;
            padding: 8px 10px;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            flex-wrap: nowrap;
        }

        .row:hover {
            background: rgba(59, 130, 246, 0.15);
        }

        .col-5 {
            flex: 1;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .col-1 {
            flex: 0 0 10%;
            text-align: right;
            padding-left: 8px;
        }

        .col-2 {
            flex: 0 0 20%;
            text-align: right;
            padding-left: 8px;
        }

        .col {
            display: flex;
            align-items: center;
            justify-content: center;
            height: auto;
        }

        .btn {
            border: none;
            color: #fff;
            border-radius: 8px;
            padding: 6px 12px;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            cursor: pointer;
            white-space: nowrap;
            flex-shrink: 0;
            font-size: 0.875rem;
        }

        .btn-blue {
            background: linear-gradient(135deg, #3b82f6, #60a5fa);
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
        }

        .btn-blue:hover {
            box-shadow: 0 6px 20px rgba(59, 130, 246, 0.5);
            transform: translateY(-1px);
        }

        .btn-yellow {
            background: linear-gradient(135deg, #dc2626, #ef4444);
            box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
        }

        .btn-yellow:hover {
            box-shadow: 0 6px 20px rgba(220, 38, 38, 0.5);
            transform: translateY(-1px);
        }

        .color-green {
            color: #34d399;
            font-weight: 600;
        }
    </style>
</head>
<body>
<div class="content">
    <div id="content-detail">
        <!-- <div class="row">
  <div class="col col-5">1. 2024-07-26-11-35-26.txt</div>
  <div class="col col-2 color-green">100%</div>
  <div class="col col-1 color-green">MEC02</div>
  <div class="col col-2" style="text-align:center">
    <button class="btn btn-yellow" onclick="donwload(12)">下载</button>
  </div>
</div> -->
    </div>
</div>
<script>
    const params = getQueryParams();

    function initTemplate(idx, fid, fname, expenv, process) {
        return '<div class="row">' +
            '		<div class="col col-5">' + fname + '</div>' +
            '		<div class="col col-1 color-green">' + process + '%</div>' +
            '		<div class="col col-2 color-green">' + (expenv.toUpperCase()) + '</div>' +
            '		<div class="col col-2" style="text-align:center">' +
            '			<button class="btn btn-yellow" onclick="download(' + fid + ', \'' + fname + '\')">下载</button>' +
            '		</div>' +
            '	</div>';
    }

    function download(fid, fname) {
        plus.nativeUI.showWaiting("正在下载文件...");
        const downloadUrl = params.host + '/expDownload?auth=' + params.auth + '&fid=' + fid;
        plus.downloader.createDownload(downloadUrl, {
            filename: "file://storage/emulated/0/Download/ScmExport/" + fname
        }, function (d, status) {
            setTimeout(() => {
                plus.nativeUI.closeWaiting();
            }, 1000)
            if (status === 200) {
                plus.runtime.openFile(d.filename);
                //const absolutePath = plus.io.convertLocalFileSystemURL(d.filename);
                plus.nativeUI.toast("文件下载成功", {
                    duration: 1500
                });
            } else {
                plus.nativeUI.alert("文件下载失败");
            }
        }).start();
    }

    function getQueryParams() {
        const url = window.location.href;
        const regExp = /[?&]([^=#]+)=([^&#]*)/g;
        let params = {};
        let match;
        while (match = regExp.exec(url)) {
            params[match[1]] = decodeURIComponent(match[2]);
        }
        return params;
    }

    function decodeBase64(base64) {
        return decodeURIComponent(escape(window.atob(base64)))
    }

    fetch(params.host + "/explist?auth=" + params.auth, {
        method: 'POST',
        body: null
    })
    .then(response => response.text())
    .then(data => {
        let res = JSON.parse(decodeBase64(JSON.parse(data).data));
        if (!res || res.length == 0) {
            return;
        }
        let innHtml = '';
        for (var i = 0; i < res.length; i++) {
            innHtml += initTemplate((i + 1), res[i].fileId, res[i].fileName, res[i].expEnv, res[i].progress);
        }
        document.getElementById("content-detail").innerHTML = innHtml;
    })
    .catch(error => {
    });
</script>
</body>
</html>
